<link rel="stylesheet" type="text/css" href="../Styles/css_main.css">

<style type="text/css">

.hint{
	width: 400px;	
}

.hint p {
    margin-top: 0px;
    padding-top: 6px;

}

#exemplares_user{
	width:98%;
	margin-top: 30px;
	margin-left: 20px;
	position:absolute;
}

.item {
	margin-top: 20px;
	margin-left: 20px;
	width: 140px;
	height: 150px;
	border: thick;

	border-radius: 7px;
	position:relative;
	float: left;
}

.item > img {
	padding-top: 10px;
    padding-left: 23px;
    padding-bottom: 5px;
}

</style>

<script type="text/javascript">

	function controlaExemplares(){
		
		var id_div = "";
		var img_src = "";
		var p_item = "";
		
		if ($('#exemplares_user').height() > 600){
			$('#principal').css('height',  $('#exemplares_user').height() + 80);
		}
		
		$(".item").on("mouseover", function() {
			$(this).css("background", "#98A0A3");
		})
		
		$(".item").on("mouseout", function() {
			$(this).css("background", "#CCCCCC");
		})
		
		$(".item").on("click", function() {
			exemplar_id = $(this).prop("id");
			item_id = $('#' + exemplar_id + '_cdItem').val();
			img_src = $('#' + exemplar_id + ' img').prop("src");
			nome_exemplar = $('#' + exemplar_id + '_nmExemplar').html(); 
			nome_plataforma = $('#' + exemplar_id + '_dsPlataforma').html(); 
			
			exibe_detalhe_exemplar_user(exemplar_id, item_id, img_src, nome_exemplar, nome_plataforma, $(this).offset().top);

		})
		
	}
	
</script>

<div id="busca_item">
	<select name="filtro_busca" id="filtro_busca" class="select_busca" >
        <option selected>Categoria</option>
        <?php
		
		  require_once ('../Controller/busca_categorias.php');
		  
		  for ($x = 1; $x <= count($categorias); $x++) {
		  	echo '<option value="'.$x.'">'.$categorias[$x].'</option>';
		  }		  
		  ?>
    </select>
    
	<input type="text" name="busca_item" id="busca_item" placeholder = "  Busca nos itens de <?php echo $_SESSION['nome']; ?>" class="busca">
</div>

<div id="exemplares_user">

<?php 

	require_once ('../Controller/busca_exemplares_user.php');
	require_once ('detalhe_exemplar_user.php');

	function listaExemplar($busca){
		
		global $exemplares;		
				
		if(empty($exemplares)) {
		
			echo '<div id="semitens" class="centro_azul borda-arredondada hint"><p>Não existem itens cadastrados, jovem gafanhoto. <a href="#" onclick="abreInsereExemplar(\'\');"> Cadastre</a>.<p></div>';
		
		} else {
		
			for ($x = 0; $x < count($exemplares); $x++) {
				
				if ($busca != ""){
					if (strripos($exemplares[$x]->nmExemplar, $busca) === false){			
						continue;	
					}
				}
				   
				?> 
					<div id="<?php echo $exemplares[$x]->cdExemplar; ?>" class="item">
						<img src="../Content/itens/<?php echo $exemplares[$x]->cdItem; ?>.jpg" width="90" height="90" style="border-radius: 80px;"/>
 						<p id="<?php echo $exemplares[$x]->cdExemplar; ?>_nmExemplar" align="center"><?php echo $exemplares[$x]->nmExemplar; ?></p>
                        <p id="<?php echo $exemplares[$x]->cdExemplar; ?>_dsPlataforma" align="center" style="font-style: italic;"><?php echo $exemplares[$x]->nmPlataforma; ?></p>
						<input type="hidden" id="<?php echo $exemplares[$x]->cdExemplar; ?>_cdItem" value="<?php echo $exemplares[$x]->cdItem; ?>"  />
					</div>					
				<?php
			}		
					
			?>
            	<div class="item" onclick="abreInsereExemplar('');">
                    <img src="../Content/add.png" width="90" height="90" style="border-radius: 80px;"/>
                    <p id="add_exemplar" align="center">Adicionar Exemplar</p>
                </div>	
                    
  				<script>controlaExemplares();</script>
			<?php
		}
	}
		
	listaExemplar("");
	
	
 ?>


</div>